<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-30 11:09:53
 * @LastEditTime: 2019-10-03 20:01:20
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <headers :name="title"></headers>
    <div class="qrcode">
      <div class="qrcode-header">
        <div>
          <img src="/static/images/user1.png" alt="" class="doctor-head">
        </div>
        <div>
          <div>
            <span class="doctor-name">刘西兰</span>
            <span class="doctor-title">主任医生</span>
          </div>
          <div>
            <span class="hospital">不孕不育医院</span>
            <span class="hospital-class">神经病外科</span>
          </div>
        </div>
      </div>
      <img src="/static/images/qrcode.png" alt="" class="qrcode-img">
      <p>扫一扫，免费问医生</p>
    </div>
  </div>
</template>

<script>
  // Use Vuex
  import store from "./store";
  import headers from '@/pages/headers/index.vue'
  export default {
    data() {
      return {
        title:'工作室二维码'
      };
    },
    components:{
      headers
    },
    computed: {
      count() {
        return store.state.count;
      }
    },
    methods: {
      increment() {
        store.commit("increment");
      },
      decrement() {
        store.commit("decrement");
      }
    },
    mounted() {

    }
  };
</script>

<style scoped>
  .qrcode{
    text-align: center;
    margin-top: 40px;
    color: #8d8d8d;
    font-size: 14px;
  }
  .qrcode .qrcode-img{
    width: 280px;
  }
  .doctor-head{
    width: 45px;
    height: 45px;
    margin-right: 10px;
  }
  .qrcode-header{
    display: flex;
    padding-left: 46px;
    text-align: left;
    align-items: center;
    margin-bottom: 10px;
  }
  .doctor-name{
    font-size: 15px;
    color: #000000;
    display: inline-block;
    margin-right: 5px;
  }
  .hospital,.hospital-class{
    font-size: 12px;
    color: #3360f9;
  }
  .hospital{
    display: inline-block;
    margin-right: 5px;
  }
</style>
